<template>
  <div class="demo-icon">
    <div style="font-size: 40px;color: #4caf50">
      <span>普通的文本：NORMAL normal</span>
      <pl-icon icon="el-icon-alarm-clock"/>
      <pl-icon icon="el-icon-arrow-down"/>
    </div>
    <button @click="showFlag = true">
      应用图标
      <pl-icon icon="el-icon-bottom" v-if="showFlag"/>
    </button>

    <h4>自定义图标</h4>
    <pl-icon icon="my-icon-yes"/>

    <h4>图标状态</h4>
    <pl-icon :key="item" :status="item"
             icon="el-icon-search" style="font-size: 40px"
             v-for="item in ['primary','success','error','warn','info']"/>

    <h4>所有图标</h4>
    <div style="text-align: center">
      <pl-input :width="500"
                @click-suffix-icon="onEnter"
                @keydown.enter="onEnter"
                shape="round"
                size="large"
                suffixIcon="el-icon-search"
                v-model="searchValue"
      />
    </div>

    <ul class="icon-list">
      <li :key="item" class="icon-item" v-for="item in targetIcons">
        <div @click="onClickItem(item)">
          <pl-icon :icon="item"/>
        </div>
        <div>
          {{item}}
        </div>
        <div>
          <div @click="onClickItem(item)">
            <pl-icon icon="el-icon-folder"/>
          </div>
          <div @click="onClickItem(item,true)">
            <pl-icon icon="el-icon-folder-s"/>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import icons from '../../../src/packages/icon/icons/index.json'
  import {copyToClipboard} from "../../../src/utils/copyToClipboard";
  // import {Icon} from '../../../src/packages/icon';


  export default {
    name: "IconDemo",
    data() {
      return {
        showFlag: false,
        icons,
        searchValue: null,
        targetSearchValue: null,
      }
    },
    computed: {
      targetIcons() {
        if (!this.targetSearchValue) return this.icons
        return this.icons.filter(icon => icon.indexOf(this.targetSearchValue) > -1)
      },
    },
    methods: {
      onEnter() {
        this.targetSearchValue = this.searchValue
      },
      onClickItem(item, isComponent) {
        copyToClipboard(isComponent ? `<pl-icon icon="${item}"/>` : item)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .demo-icon {
    .icon-list {
      list-style: none;
      margin: 0;
      padding: 0;

      .icon-item {
        display: inline-block;
        width: 180px;
        border: solid 1px #f2f2f2;
        margin: 10px;
        vertical-align: top;
        cursor: pointer;
        user-select: none;
        background-color: white;

        & > div:first-child {
          height: 60px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: solid 1px #f2f2f2;
          font-size: 32px;

          &:hover {
            background-color: #f6f4ff;
          }
        }

        & > div:nth-child(2) {
          border-bottom: solid 1px #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          white-space: nowrap;
        }

        & > div:last-child {
          display: flex;
          align-items: center;
          justify-content: center;

          & > div {
            color: #aaa;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            //todo ↓不加下面这句就不是居中的
            flex: 1;

            &:hover {
              background-color: #f6f4ff;
            }

            &:first-child {
              border-right: solid 1px #f2f2f2;
            }
          }
        }
      }
    }
  }
</style>
